<template>
  <div class="count-container">
    <div class="my-chart" ref="chart_ref"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getOrder } from '@/api/report'
export default {
  data() {
    return {
      myChart: null,
      orders: [],
      validOrders: [],
    }
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  computed: {
    ...mapState(['theme']),
  },
  methods: {
    initChart() {
      this.myChart = this.$echarts.init(this.$refs.chart_ref, this.theme)
      const colorArr = ['#00DDFF', '#37A2FF']
      const initOptions = {
        color: colorArr,
        title: {
          text: '最近30天订单',
          top: 10,
          left: 'center',
        },
        legend: {
          top: '15%',
          icon: 'circle',
          left: 'center',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        grid: {
          top: '30%',
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
      }
      this.myChart.setOption(initOptions)
    },
    async getData() {
      const { data: order } = await getOrder()
      this.allData = order
      this.updateChart()
    },
    updateChart() {
      const dataList = this.allData.dateList
      const orderCountList = this.allData.orderCountList
      const validOrderCountList = this.allData.validOrderCountList

      this.orders = {
        name: '所有订单',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(0, 221, 255)',
            },
            {
              offset: 1,
              color: 'rgb(77, 119, 255)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: orderCountList,
      }
      this.validOrders = {
        name: '有效订单',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(55, 162, 255)',
            },
            {
              offset: 1,
              color: 'rgb(116, 21, 219)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: validOrderCountList,
      }
      const dataOption = {
        xAxis: {
          data: dataList,
        },
        series: [this.orders, this.validOrders],
      }
      this.myChart.setOption(dataOption)
    },
    screenAdapter() {
      const titleFontSize = (this.$refs.chart_ref.offsetWidth / 150) * 3.6
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
      }
      this.myChart.setOption(adapterOption)
      this.myChart.resize()
    },
  },
}
</script>

<style lang="less" scoped></style>
